<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Dtalk Menu</title>
  <script src="jquery-easyui/jquery.min.js"></script>
  <script src="config.js"></script>
  <style>
    body {
      font-family: "Trebuchet MS", sans-serif;
      margin: 50px;
    }

  </style>
</head>
<script>

</script>

<body>
  <h1>Dtalk Menu</h1>
  <ul style="width:400px;" id="menu">
  </ul>
  <h4 id="auth-status"></h4>
  <h4 id="req-status"></h4>
  <h4 id="ws-status"></h4>

  <script>

    // $.ajax({
    //     type: "GET",
    //     url: req_prefix + "/login?password=3fbf&isMd5=false",
    //     xhrFields: {
    //       withCredentials: true
    //     },
    //     crossDomain: true,
    //     success:function(data){
    //       console.log(data)
    //       $("#auth-status").html(data.deviceMac + ":" + data.statusMessage +"<br>");
    //     },
    //     error:function(data){
    //       $("#auth-status").html(data.statusText+"("+data.status+")<br>" + data.responseText);
    //     }
    //     })
    var root_menu, current_item;
    function render_item(item) {
      var li = "<li {ONCLICK} ><div>" + (item.uiName ? item.uiName : item.name) + "{VALUE}</div></li>"
      switch (item.catalog) {
        case 'MENU':
          li = li.replace('{ONCLICK}', "onclick=req_menu('" + item.path + "')").replace('{VALUE}','')
          break;
        case 'CMD':
        li = li.replace('{VALUE}','')
            if (/(back)/.test(item.name))
            li = li.replace('{ONCLICK}', "onclick=req_menu('" + item.path + "')")            
          break;
        case 'OPTION':
          li = li.replace('{ONCLICK}', '').replace('{VALUE}',item.value ? "("+item.value+")" : "")
          break;
        default:
          li = li.replace('{ONCLICK}', '').replace('{VALUE}','')
          break;
      }
      return li
    }
    function render_menu(menu) {
      var childs = "";
      for (var c in menu.childs) {
        childs += render_item(menu.childs[c])
      }
      return childs;
    }
    function req_menu(path) {
      $.ajax({
        type: "GET",
        url: req_prefix + "/dtalk" + path,
        xhrFields: {
              withCredentials: true
        },
        crossDomain: true,
        contentType: "application/json",
        success:function(data){
          current_item = data;
          $('#menu').html(render_menu(current_item));
        },

        error:function(data){
          $("#req-status").text(data);
        }
        });
    }

    $.ajax({
        type: "GET",
        url: req_prefix + "/dtalk/",
        xhrFields: {
              withCredentials: true
        },
        crossDomain: true,
        contentType: "application/json",
        success:function(data){
          root_menu = data;
          $('#menu').html(render_menu(root_menu));
        },
        error:function(data){
          $("#req-status").text(data);
        }
        })
    /** 参见sock.io API文档事件(Event)说明 https://socket.io/docs/client-api  */
    function connect() {
      var wsuri = 'ws://127.0.0.1:8181'
      socket = new WebSocket(wsuri);
      socket.onopen = function() {
          //成功连接到服务器
          console.log("connected to " + wsuri);
      }
      socket.onclose = function(e) {
          console.log("connection closed (" + e.code + ")");
      }
      socket.onmessage = function(e) {
          //服务器发送通知
          //开始处理
          console.log("message received: " + e.data);
      }
      // socket.on('reconnecting', function (attemptNumber) {
      //   var str = '<p>socket正在与服务器建立链接 '+attemptNumber+' </p>';
      //   $("#ws-status").append(str);
      // });
      // socket.on('connect', function () {
      //   var str = '<p>当socket与后端成功建立链接</p>';
      //   $("#ws-status").append(str);
      // });
      // socket.on('disconnect', function (reason) {
      //   var str = '<p>当与服务器断开链接:'+reason+'</p>';
      //   $("#ws-status").append(str);
      // });
      // socket.on('reconnect', function (attemptNumber) {
      //   var str = '<p>重新链接成功</p>';
      //   $("#ws-status").append(str);
      // });
      // socket.on('reconnect_failed', function () {
      //   var str = '<p>重连失败</p>';
      //   $("#ws-status").append(str);
      // });
      // // 显示频道订阅显示消息  
      // socket.on('message', function (message) {
      //   console.log(message);
      //   $('.hint-infor').text(message.channel + ':' + message.data);        
      // });
      // //显示请求响应
      // socket.on('ack', function (ack) {
      //   console.log(ack);
      //   $('.hint-ack').text(ack.request + ':' + ack.respone + ':' + ack.reply);        
      // });


    }

    connect();

  </script>
</body>

</html>